<template>
   <div >
         <!-- 内容 -->
         <div class="overflow-auto  flex" id="content" > 
              <div class="navi flex">
                   <button v-for="item in NaviData" :key="item.id" :class="NaviState==item.id?'active':null" @click="changeNavi(item.id)">
                     {{item.label}}
                  </button>
               </div> 
               <textarea v-model="form.video" placeholder="输入视频链接" v-if="NaviState==1" class="input" />             
               <!-- 视频 -->    
               <el-upload
                  v-else
                  class="avatar-uploader flex"
                  v-model="form.video"
                  :headers="headers" 
                  :on-remove="handleRemove"
                  :on-success="handleAvatarSuccess"
                  :before-upload="beforeAvatarUpload"
                  :limit='1' 
                  action="/api/File/upload/video/ArticleVideo"
                  drag>   
                  <i class="el-icon-upload"></i>
                  <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em>(不能超过50mb)</div>
               </el-upload>    

                               
         </div>
            
         
            <el-button icon="el-icon-position" @click="publish_" id="publicButton">下一步</el-button>

   </div> 
</template>
<script>
import {mapActions, mapMutations,mapState} from 'vuex'
import common from "@/common/global"
  export default 
  {
     name :'', 
     data(){
        return{
          titleLength:0,
          contentLength:0,
          form: {video: "",videoType:1},
          NaviState:1, //1：本地上传 2：上传链接
          ImageUrls:[],
          headers:{
             token:localStorage.getItem("token")
          },
          NaviData:[
            {id:1,label:'视频链接'},
            {id:2,label:'本地上传'},
          ]
        }
     },
     computed:{
      ...mapState('Login',['User']),
      ...mapState('Init',['ArticleTypeData']), //类型
      ...mapState('Article',['PublishData']) //类型
     },
     mounted() {
        this.init()
     },
     methods:{
       ...mapActions('Article',['Publish']),
       ...mapMutations('Article',['SETPUBLISHSTATE']),

       init(){
         this.form.video = this.PublishData?.video
         this.form.videoType = this.PublishData?.videoType || 1
         this.NaviState = this.PublishData?.videoType || 1
       },

        getTitleLength(e) {
         let length=e.value.trimLeft().length
			this.titleLength = length
			this.form.title = e.value.trimLeft()
          this.form.title = common.filterSensitiveInfo(this.form.title)
	   	},
		  getContentLength(e) {
			 let length=e.value.trimLeft().length
			 this.contentLength = length
			this.form.content = e.value.trimLeft()
          this.form.content = common.filterSensitiveInfo(this.form.content)
		 },
       changeNavi(id){
           this.form.videoType = id
           this.NaviState=id
           this.form.video=''
       },
        /*删除视频*/
        handleRemove(file) { 
           let res = file.response
           this.form.video = ""
        },
      
        handleAvatarSuccess(res) {
            if(res.type=='error') return this.$message.error('未知错误');
            this.form.video = res.data;
        },
        //上传视频前做一些限制
         beforeAvatarUpload(file) {
            const whiteList = ["video/mp4"];
            if (whiteList.indexOf(file.type) === -1) {
               this.$message.error('上传文件类型只能是 video/mp4 ');
               return false;
            }

            const isLt2M = file.size / 1024 / 1024 < 50;
  
            if (!isLt2M) this.$message.error('上传视频大小不能超过 50MB!');
            return isLt2M;
        },
        //发布
        async  publish_(){
           if(this.form.video=='') return this.$message.error('请上传视频')
           if(this.User==null) return this.$message.error('非法发布')
           this.form.classify=2
           this.SETPUBLISHSTATE({index:6,title:"发布",data:this.form})
        }
   
     },
  }
</script>
<style scoped lang="less">



::v-deep .el-upload-dragger{  //每个盒子
    border: 1px solid var(--GeneralBackColor);
    background: none;
}

::v-deep .el-input__inner{
    background: rgba(255, 255, 255, 0.7);
}





//内容
#content{
   width: 100%;
   height: 380px;
   overflow: auto;
   background: rgba(255, 255, 255, 0.7);
   border-radius: 5px;
   align-items: flex-start;

   // 导航
   .navi{
      width: 80%;
 
      justify-content: flex-start;
      margin-top: 50px;
      
      button{
         color: white;
         font-size: 18px;
         padding: 5px;
         margin-right: 10px;
         background: var(--GeneralBackColor-half);
         border-radius: 5px;
      }
      .active{
         background: var(--GeneralBackColor);
      }
   }
   .input{
      width: 80%;
      height: 50%;
      border-radius: 5px;
      padding: 5px;
      font-size: 16px;
      background: white;
   }
}
//发布按钮
#publicButton{
   margin: 0;
   width: 100%;
   border-radius: 25px;
   background: var(--GeneralBackColor);
   color: white;
}



</style>